<template>
    <div class="assets-management-deposit-out">
      <div class="vab-tab">
        <div class="line">
          <div
            class="btn"
            @click="handleClick(item.value)"
            :class="{ active: active === item.value }"
            v-for="item in tabList"
            :key="item.value"
          >
          {{item.label}}
          </div>
        </div>
      </div>
      <deposit-out-component v-if="active === 0"></deposit-out-component>
      <out-history v-else></out-history>
    </div>
  </template>
  <script>
    import DepositOutComponent from './components/deposit-out.vue'
    import OutHistory from './components/out-history.vue'
    export default {
      name: 'DepositOut',
      components: {
        DepositOutComponent,
        OutHistory,
      },
      data() {
        return {
          active: 0,
          tabList: [
            {
              label: '提现',
              value: 0,
            },
            {
              label: '提现记录',
              value: 1,
            },
          ],
        }
      },
      watch: {
        $route: {
          handler(route) {
            if (route.query && route.query.active)
              this.active = +route.query.active
          },
          immediate: true,
        },
      },
      methods: {
        handleClick(value) {
          this.active = value
        },
      },
    }
  </script>
  <style lang="scss" scoped>
    .assets-management-deposit-out {
      min-height: 800px;
      background: #ffffff;
      .vab-tab {
        box-sizing: border-box;
        width: 100%;
        padding-top: 20px;
        padding-left: 20px;
        border-collapse: collapse;
        .line {
          display: flex;
          width: 100%;
          border-collapse: collapse;
          border-bottom: 1px solid #dcdfe6;
          .btn {
            position: relative;
            width: auto;
            padding:0 20px;
            margin-right: 2px;
            margin-bottom: -1px;
            font-size: 14px;
            line-height: 40px;
            color: #606266;
            text-align: center;
            cursor: pointer;
            border-collapse: collapse;
            background: #f5f7fa;
            border: 1px solid #dcdfe6;
            border-bottom: none;
            border-radius: 2px 2px 0px 0px;
          }
          .active {
            font-weight: 500;
            color: #303133;
            background: #fff;
            border-bottom: 1px solid #fff;
          }
        }
      }
    }
  </style>
  